Passed
Pull Request — main (#12)
by Julia
02:02
created

block-navigation.js ➔ init   C

Complexity

Conditions 11

Size

Total Lines 85
Code Lines 54

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 54
dl 0
loc 85
rs 5.2854
c 0
b 0
f 0
cc 11

How to fix   Long Method    Complexity   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

Complexity

Complex classes like block-navigation.js ➔ init often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
/* eslint-disable */
2
var jumpToCode = (function init() {
3
    // Classes of code we would like to highlight in the file view
4
    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
5
6
    // Elements to highlight in the file listing view
7
    var fileListingElements = ['td.pct.low'];
8
9
    // We don't want to select elements that are direct descendants of another match
10
    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
11
12
    // Selecter that finds elements on the page to which we can jump
13
    var selector =
14
        fileListingElements.join(', ') +
15
        ', ' +
16
        notSelector +
17
        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
18
19
    // The NodeList of matching elements
20
    var missingCoverageElements = document.querySelectorAll(selector);
21
22
    var currentIndex;
23
24
    function toggleClass(index) {
25
        missingCoverageElements
26
            .item(currentIndex)
27
            .classList.remove('highlighted');
28
        missingCoverageElements.item(index).classList.add('highlighted');
29
    }
30
31
    function makeCurrent(index) {
32
        toggleClass(index);
33
        currentIndex = index;
34
        missingCoverageElements.item(index).scrollIntoView({
35
            behavior: 'smooth',
36
            block: 'center',
37
            inline: 'center'
38
        });
39
    }
40
41
    function goToPrevious() {
42
        var nextIndex = 0;
43
        if (typeof currentIndex !== 'number' || currentIndex === 0) {
44
            nextIndex = missingCoverageElements.length - 1;
45
        } else if (missingCoverageElements.length > 1) {
46
            nextIndex = currentIndex - 1;
47
        }
48
49
        makeCurrent(nextIndex);
50
    }
51
52
    function goToNext() {
53
        var nextIndex = 0;
54
55
        if (
56
            typeof currentIndex === 'number' &&
57
            currentIndex < missingCoverageElements.length - 1
58
        ) {
59
            nextIndex = currentIndex + 1;
60
        }
61
62
        makeCurrent(nextIndex);
63
    }
64
65
    return function jump(event) {
66
        if (
67
            document.getElementById('fileSearch') === document.activeElement &&
68
            document.activeElement != null
0 ignored issues
show
Best Practice introduced by
Comparing document.activeElement to null using the != operator is not safe. Consider using !== instead.
Loading history...
69
        ) {
70
            // if we're currently focused on the search input, we don't want to navigate
71
            return;
72
        }
73
74
        switch (event.which) {
75
            case 78: // n
76
            case 74: // j
77
                goToNext();
78
                break;
79
            case 66: // b
80
            case 75: // k
81
            case 80: // p
82
                goToPrevious();
83
                break;
84
        }
85
    };
86
})();
87
window.addEventListener('keydown', jumpToCode);
88